<template>
    <view class="page">
        <!--  <uni-section :title="'根据日期时间范围查找任务：'" type="line"></uni-section>
        <view class="example-body">
            <uni-datetime-picker v-model="datetimerange" type="datetimerange" start="2021-3-20 12:00:00"
                end="2021-6-20 20:00:00" rangeSeparator="至" />
        </view> -->

        <view class="uni-padding-wrap uni-common-mt">
            <view class="button-sp-area">
                <span>根据日期时间范围查找任务：</span>
                <button class="mini-btn" type="primary" size="mini" @click="queryByDate">搜索</button>
            </view>
        </view>

        <view class="example-body">
            <uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useValveTaskStore } from '@/stores/modules/taskquery';
//onShow会在页面每次显示时调用
import { onShow } from '@dcloudio/uni-app'; // 引入微信小程序的生命周期钩子


const taskStore = useValveTaskStore();

const emit = defineEmits(['notifyParent']);

// 获取今天的日期并格式化为 "YYYY-MM-DD HH:mm:ss"
const padZero = (num: number): string => num.toString().padStart(2, '0');
const getTodayRange = (): [string, string] => {
    const today = new Date();
    const year = today.getFullYear();
    const month = padZero(today.getMonth() + 1); // 注意月份从0开始计数
    const day = padZero(today.getDate());

    return [
        `${year}-${month}-${day} 00:00:00`,
        `${year}-${month}-${day} 23:59:59`
    ];
};

// 定义响应式数据
// const datetimerange = ref(["2021-03-20 20:10:10", "2021-05-10 10:10:10"]);
//默认显示今天
const datetimerange = ref<string[]>([]);
onShow(() => {
    datetimerange.value = getTodayRange();
    queryByDate();
})

const queryByDate = async () => {
    // console.log("根据日期时间范围查找任务：", datetimerange.value);
    const res = await taskStore.getTaskData(datetimerange.value);

    emit('notifyParent', res);
};

// 定义一个可以被父组件调用的方法
defineExpose({
    getDataAgain: queryByDate,
});
</script>

<style>
.button-sp-area {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: space-evenly;
    margin: 20rpx 25rpx;
}
</style>
